<template>
    <div class="page_content_card">
        <PageTitleLine :title="title"></PageTitleLine>

        <n-tabs type="line" animated :on-update:value="onTabChange" v-if="tabList.length > 0">
            <n-tab v-for="item in tabList" :key="item.tabValue" :name="item.tabValue">
                {{ item.tabName }}
            </n-tab>
        </n-tabs>

        <slot name="content"></slot>

        <MoreBtn v-if="more" :mtop="30" @onMoreClick="onMoreClick"></MoreBtn>
    </div>
</template>

<script setup>
import { NTabs, NTab } from "naive-ui"
import PageTitleLine from "@/components/pageTitleLine/index.vue"
import MoreBtn from "@/components/more/index.vue"

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    tabList: {
        type: Array,
        default: () => []
    },
    more: {
        type: Boolean,
        default: true
    }
})

const emits = defineEmits(['onMoreClick', 'onTabChange'])

const onMoreClick = () => {
    emits('onMoreClick')
}

const onTabChange = (value) => {
    emits('onTabChange', value)
}
</script>

<style lang='less'></style>